<!--
  功能：功能描述
  作者：
  邮箱：
  时间：2020年12月17日 23:15:36
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="interfaces">
    <!-- 按钮 -->
    <div class="btns">
      <!-- {{param}} -->
      <!-- 搜索部分 -->
      <el-row gutter="20">
        <el-col :span="21">
          <div>
            <el-form size="defult" inline style="text-align: left">
              <!-- 输入框 -->
              <el-form-item label="查找接口：">
                <el-input
                  v-model="param.iname"
                  placeholder="接口名"
                  clearable
                  @input="loadInterfaces"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="param.userName"
                  placeholder="作者名"
                  clearable
                  @input="loadInterfaces"
                ></el-input>
              </el-form-item>
              <!-- 搜索按钮 -->
              <el-form-item>
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  @click="loadInterfaces"
                  >搜索</el-button
                >
              </el-form-item>
              <!-- 添加接口 -->
              <el-form-item style="text-align: right"
                ><el-button
                  type="success"
                  size="medium"
                  @click="toAddHandler"
                  icon="el-icon-circle-plus"
                  >添加接口</el-button
                ></el-form-item
              >
            </el-form>
          </div>
        </el-col>
        <!-- 测试按钮 -->
        <el-col :span="3">
          <div>
            <el-button type="primary" size="medium" @click="testInterfaces"
              >接口测试</el-button
            >
            <!-- <el-button
              @click="showDrawer"
              type="primary"
              size="medium"
            >
              查看数据
            </el-button> -->
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- /按钮 -->
    <!-- {{interfaces}} -->
    <!-- 表格 -->
    <div class="table">
      <el-table
        size="small"
        :data="
          interfaces.filter(
            (data) =>
              !param.userName ||
              data.userName.toLowerCase().includes(param.userName.toLowerCase())
          )
        "
        stripe
        height="500"
      >
        ​
        <el-table-column
          type="index"
          :index="1"
          label="序号"
          align="center"
        ></el-table-column>
        ​
        <el-table-column
          label="名称"
          prop="name"
          align="left"
          sortable
        ></el-table-column>
        ​
        <el-table-column label="状态" prop="status" align="center" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '正常' ? 'success' : 'info'"
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>
        ​
        <el-table-column label="路径" prop="url" align="left"></el-table-column>
        <el-table-column
          label="限制使用次数"
          prop="limitTimes"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column
          label="作者名"
          prop="userName"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
        label="模块ID"
        prop="moduleId"
        align="center"
        width="100"
      ></el-table-column> -->
        <!-- <el-table-column
        label="用户ID"
        prop="userId"
        align="center"
        width="100"
      ></el-table-column> -->
        <el-table-column label="操作" width="120" align="center">
          <!-- 定制插槽 -->
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="warning"
                size="small"
                icon="el-icon-edit"
                @click="updateHandler(scope.row)"
              ></el-button>
              <el-popconfirm
                title="确定删除吗？"
                @onConfirm="deleteHandler(scope.row)"
              >
                <el-button
                  type="danger"
                  size="small"
                  icon="el-icon-delete-solid"
                  slot="reference"
                ></el-button>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- /表格 -->

    <!-- 抽屉 -->
    <!-- <el-drawer
      title="接口数据"
      :visible.sync="drawer"
      :direction="rtl"
      ><div id="drawer_container" style="width:600px height: 400px"></div
    ></el-drawer> -->
    <!-- /抽屉 -->
  </div>
</template>

<script>
import { del, get, post } from "@/utils/request";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      param: {},
      interfaces: [],
      back: [],
      drawer:false,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    toAddHandler() {
      this.$router.push("/Interfaces/create");
    },
    loadInterfaces() {
      let url = "http://121.196.106.124:8888/Interfaces/Query";
      get(url, this.param).then((resp) => {
        this.interfaces = resp.data;
      });
    },
    deleteHandler(row) {
      let url = "http://121.196.106.124:8888/Interfaces/DeleteById";
      del(url, { id: row.id }).then((resp) => {
        this.$message({ type: "success", message: resp.message });
        this.loadInterfaces();
      });
    },
    updateHandler(row) {
      this.$router.push({
        path: "/Interfaces/create",
        query: row,
      });
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    search() {
      (back) =>
        interfaces.filter(
          (interfaces) =>
            !param.userName || interfaces.userName.includes(param.userName)
        );
    },
    testInterfaces() {
      this.$router.push("/recognition/index");
    },
    // showDrawer(){
    //   this.drawer = true;
    //   this.InitContainer();
    // },
    // InitContainer() {
    //   var chart = Highcharts.chart("container", {
    //     chart: {
    //       type: "spline",
    //     },
    //     title: {
    //       text: "图像识别系统接口调用情况",
    //     },
    //     subtitle: {
    //       text: "--2020年1 - 11月",
    //     },
    //     xAxis: {
    //       categories: [
    //         "一月",
    //         "二月",
    //         "三月",
    //         "四月",
    //         "五月",
    //         "六月",
    //         "七月",
    //         "八月",
    //         "九月",
    //         "十月",
    //         "十一月",
    //       ],
    //     },
    //     yAxis: {
    //       title: {
    //         text: "次数（次）",
    //       },
    //       labels: {
    //         formatter: function () {
    //           return this.value;
    //         },
    //       },
    //     },
    //     tooltip: {
    //       crosshairs: true,
    //       shared: true,
    //     },
    //     plotOptions: {
    //       spline: {
    //         marker: {
    //           radius: 4,
    //           lineColor: "#666666",
    //           lineWidth: 1,
    //         },
    //       },
    //     },
    //     series: [
    //       {
    //         name: "动物识别接口",
    //         marker: {
    //           symbol: "square",
    //         },
    //         data: [17, 17, 15, 16, 14, 15, 11, 12, 10, 17, 9],
    //       },
    //       {
    //         name: "植物识别接口",
    //         marker: {
    //           symbol: "diamond",
    //         },
    //         data: [10, 15, 14, 14, 19, 18, 15, 17, 13, 12, 17],
    //       },
    //       {
    //         name: "昆虫识别接口",
    //         marker: {
    //           symbol: "circle",
    //         },
    //         data: [5, 6, 4, 4, 7, 10, 15, 13, 9, 7, 8],
    //       },
    //     ],
    //   });
    // },
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.loadInterfaces();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.btns {
  margin-top: 0.5em;
  margin-bottom: -0.5em;
  margin-left: 1em;
}
.table {
  border: 1px solid rgb(216, 216, 216);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>